<template>
  <div class="main ">
    <Swiper :list="demo03_list" loop auto style="width:100%;margin:0 auto;" height="168px" dots-class="custom-bottom" dots-position="center" />
    <tab custom-bar-width="0" active-color="#ffffff">
      <tab-item></tab-item>
      <tab-item :selected="selected" @on-item-click="onItemClick" :class="{gray:selected,pink:!selected}">体验团测评</tab-item>
      <tab-item :selected="!selected" @on-item-click="onItemClick" :class="{gray:!selected,pink:selected}">美妆秘诀</tab-item>
      <tab-item></tab-item>
    </tab>
    <div class="main-contianer">
      <pull-to :top-block-height="50" :is-throttle-scroll="true" :bottom-block-height="50" :top-load-method="refresh" :bottom-load-method="refresh" lock-x ref="scrollerBottom">
        <keep-alive>
          <!-- 将缓存name为a或者b的组件，结合动态组件使用 -->
          <Measure :p='p' :class="{none:selected}" />
        </keep-alive>
        <keep-alive>
          <Secret :p='p' :class="{none:!selected}" />
        </keep-alive>
      </pull-to>
    </div>
    <footer @click="fillBeaty(selected)">
      <div :class="{ceping:!selected,mijue:selected}"> </div>
    </footer>
  </div>
</template>
 <script>
import { Swiper, Tab, TabItem, Panel } from "vux";
import { log } from "util";
import PullTo from "vue-pull-to";
import Measure from '@/components/tem/Measure'
import Secret from '@/components/tem/Secret'
import FillBtn from '@/components/tips/FillBtn'

const TOP_DEFAULT_CONFIG = {
  pullText: "下拉刷新", // 下拉时显示的文字
  triggerText: "释放更新", // 下拉到触发距离时显示的文字
  loadingText: "加载中...", // 加载中的文字
  doneText: "加载完成", // 加载完成的文字
  failText: "加载失败", // 加载失败的文字
  loadedStayTime: 400, // 加载完后停留的时间ms
  stayDistance: 50, // 触发刷新后停留的距离
  triggerDistance: 20 // 下拉刷新触发的距离
};

const BOTTOM_DEFAULT_CONFIG = {
  pullText: "上拉加载",
  triggerText: "释放更新",
  loadingText: "加载中...",
  doneText: "加载完成",
  failText: "加载失败",
  loadedStayTime: 400,
  stayDistance: 50,
  triggerDistance: 20
};
const baseList = [
  {
    url: "javascript:",
    img: "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
    title: "送你一朵fua"
  },
  {
    url: "javascript:",
    img: "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg",
    title: "送你一辆车"
  },
  {
    url: "javascript:",
    img: "https://static.vux.li/demo/5.jpg", // 404
    title: "送你一次旅行",
    fallbackImg:
      "https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg"
  }
];
const imgList = [
  "http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff",
  "http://placeholder.qiniudn.com/800x300/FFEF7D/ffffff",
  "http://placeholder.qiniudn.com/800x300/8AEEB1/ffffff"
];
const demoList = imgList.map((one, index) => ({
  url: "javascript:",
  img: one
}));

export default {
  data() {
    return {
      selected: false,
      demo03_list: baseList,
      type: "1",
      p: [
        {
          src:
            "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
          fallbackSrc: "http://placeholder.qiniudn.com/60x60/3cc51f/ffffff",
          title:
            "3213211掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..",
          desc:
            "1由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。",
          url: "1"
        },
        {
          src:
            "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
          fallbackSrc: "http://placeholder.qiniudn.com/60x60/3cc51f/ffffff",
          title:
            "2222掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..",
          desc:
            "2由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。",
          url: "2"
        },
        {
          src:
            "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
          fallbackSrc: "http://placeholder.qiniudn.com/60x60/3cc51f/ffffff",
          title:
            "3222掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..",
          desc:
            "3222由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。",
          url: "/component/cell"
        },
        {
          src:
            "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
          fallbackSrc: "http://placeholder.qiniudn.com/60x60/3cc51f/ffffff",
          title:
            "422222掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..",
          desc:
            "4由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。",
          url: "3"
        },
        {
          src:
            "https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg",
          title:
            "5424掘金是一个高质量的技术社区，从 ECMAScript 6 到 Vue.js，性能优化到开源类库，让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP，技术干货尽在掌握..",
          desc:
            "5由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。",
          url: "4",
          meta: {
            source: "来源信息",
            date: "时间",
            other: "其他信息"
          }
        }
      ],
      disabled:
        typeof navigator !== "undefined" &&
        /iphone/i.test(navigator.userAgent) &&
        /ucbrowser/i.test(navigator.userAgent)
    };
  },
  components: {
    Swiper,
    Tab,
    TabItem,
    Panel,
    PullTo, Measure, Secret, FillBtn
  },
  mounted() {
    this.$nextTick(() => {
      console.log(this.$route.name);
    })
  },
  methods: {
    //切换栏目
    onItemClick(index) {
      console.log('index', index);
      //路由跳转
      this.selected = index == 1 ? false : true;
      let name = index == 1 ? 'ceping' : 'mijue';
      // this.$router.push({ name: name, params: { p: this.p } })

    },
    onImgError(item, $event) {
      console.log(item, $event);
    },

    refresh(loaded) {
      setTimeout(() => {
        this.p = this.p.reverse();
        // this.$router.push({ name: this.$route.name, params: { p: this.list } })
        loaded("done");
      }, 2000);
    },
    //跳转子组件
    fillBeaty(type) {
      this.$router.push({ name: this.selected ? 'fillmijue' : 'fillceping', params: { p: this.p } })
    }
  }
};
</script>
 
 <style lang="less" >
.none {
  display: none;
}
.main {
  width: 100%;
  min-height: 100%;
  background: url("../../assets/img/main-bg.png") no-repeat;
  background-size: cover;
  .vux-tab-wrap {
    margin-top: 10px;
  }

  .vux-tab-wrap,
  .vux-tab-container,
  .vux-tab {
  }
  .vux-tab .vux-tab-item {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    margin: 0 15px;
    -webkit-box-flex: none;
    flex: none;
    width: 250px;
    font-weight: bold;
    font-size: 30px;
  }
  .vux-tab {
    background: none;
    justify-content: center;
    .gray {
      background: linear-gradient(#767676, #bbbcbb); /* 标准的语法 */
      color: #fff;
    }
    .pink {
      background: linear-gradient(#ff639a, #ff97bc); /* 标准的语法 */
      color: #fff;
    }
  }
  .main-contianer {
    overflow: hidden;
    margin: 0 auto;
    padding: 30px 0;
    width: 600px;
    height: 670px;
    background: #fff;
    border-radius: 30px;
  }
  .vux-tab-ink-bar-transition-forward {
    display: none;
    height: 0;
  }
  .weui-media-box {
    padding: 15px;
  }
  .weui-media-box_appmsg .weui-media-box__hd {
    width: 232px;
    height: 172px;
  }
  footer {
    // position: fixed;
    // bottom: 20px;
    margin: 20px 0;
    padding-bottom: 20px;
    width: 100%;
    div {
      margin: 0 auto;
      width: 474px;
      height: 94px;
    }
  }
  .ceping {
    background: url("../../assets/img/ceping-btn.png") no-repeat;
    background-size: 474px 94px;
  }
  .mijue {
    background: url("../../assets/img/mijue-btn.png") no-repeat;
    background-size: 474px 94px;
  }
}
</style>
 